<template>
  <!-- 内容区域 -->
  <el-table
    :data="coverData"
    ref="multipleTable"
    row-key="id"
    @selection-change="coverDataSelected"
    height="250"
    style="width: 100%"
  >
    <el-table-column
      type="selection"
      :reserve-selection="true"
      width="55"
    ></el-table-column>
    <el-table-column prop="imageUrl" label="图片" width="180">
      <template slot-scope="scope">
        <img
          :src="scope.row.imageUrl | filtersFileUrl()"
          width="40"
          height="40"
        />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
</template>

<script>
import { getAreatypes } from "@/api/superlinkAreat";
export default {
  props: ["editcoverData"],
  data() {
    return {
      checked: true,
      checked1: true,
      coverData: [],
      //editcoverData:[],
      coverDataSelectedIds: [],
    };
  },
  mounted() {
    this.getAreaTypes();
  },
  methods: {
    getAreaTypes() {
      var that = this;
      var t;
      clearTimeout(t);
      t = setTimeout(function () {
        var param = { includeContainedAreaTypes: true, page: 1, pageSize: 0 };
        getAreatypes(param).then((res) => {
          that.coverData = res.data.results;
          that.defaultSelectCoverData();
        });
      }, 100);
    },
    coverDataSelected(objs) {
      // 去重获取被选中的id值存入到数组中
      this.multipleSelection = [];
      for (let i = 0; i < objs.length; i++) {
        if (this.multipleSelection.indexOf(objs[i].token) === -1) {
          this.multipleSelection.push(objs[i].token);
        }
      }
      this.coverDataSelectedIds = this.multipleSelection;
      this.$emit("sendselectedids", this.coverDataSelectedIds);
    },

    defaultSelectCoverData() {
      var that = this;
      var i = 0;
      this.$nextTick(() => {
        that.editcoverData.forEach(function (e, i) {
          that.coverData.forEach(function (a, j) {
            if (e == a.id) {
              that.$refs.multipleTable.toggleRowSelection(a, true);
            }
          });
        });
      });
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-top: 0px;
}
/deep/ .el-card__body {
  padding: 0;
}
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
}
.site-img {
  float: left;
  margin-top: 15px;
  margin-left: 10px;
}
.site-content {
  float: left;
  margin-top: 21px;
  margin-left: 25px;
}
.el-pagination {
  margin-left: 32%;
  margin-top: 3%;
}
.top-tab {
  margin-top: 35px;
  background-color: #d1e4f0;
}
.top-button {
  margin-left: 88%;
}
.img-hover {
  cursor: pointer;
  transition: all 0.6s;
}
.img-hover:hover {
  transform: scale(1.1);
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
/deep/ .el-dialog__header {
  background-color: #409eff;
}
.el-icon-edit-outline {
  color: #fff;
}
/deep/ .title-text {
  color: #ffffff;
}
.dialog-title {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}
.dialog-title i {
  color: #f3f7fa;
  margin-right: 5px;
  font-size: 16px;
  line-height: 0px;
}
.site-content {
  float: left;
  margin-top: 5%;
  margin-left: 20px;
}
.site-name {
  width: 130px;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-number {
  width: 130px;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-description {
  width: 150px;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explain {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
}
.title-text {
  font-size: 18px;
}
.demo-form-inline {
  margin-top: 10px;
}
.dialog-footer {
  float: right;
}
.el-card {
  margin-top: 12px;
  height: 185px;
  background-image: url("http://img-u-3.51miz.com/preview/element/00/01/11/37/E-1113756-4765F0FC.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320");
}
</style>>
